<template>
  <div class="main-wrapper">
    <div class="main">
      <div class="nav">
        <div class="nav-item" :class="{active : item.flag}" v-for="(item, index) in navList" :key="index" @click="navCut(item)">
          {{ item.name }}
        </div>
      </div>
      <component :is="main"></component>
    </div>
  </div>
</template>

<script>
import Home from "@/view/Home/index.vue"; // 首页
import CourseTeach from "@/view/CourseTeach/index.vue"; // 课程教学
import RealTask from "@/view/ReaTask/index.vue"; // 实训任务
import Expand from "@/view/Expand/index.vue"; // 拓展资源
import SkillEvents from "@/view/SkillEvents/index.vue"; // 技能大赛
import CheckEvaluate from "@/view/CheckEvaluate/index.vue"; // 考核评价
import AboutTmt from "@/view/AboutTmt/index.vue"; // 走进行业

export default {
  name: "Main",
  data() {
    return {
      main: "Home",
      navList: [
        { name: "首页", flag: true, moduleName: "Home" },
        { name: "课程教学", flag: false, moduleName: "CourseTeach" },
        { name: "实训任务", flag: false, moduleName: "RealTask" },
        { name: "拓展资源", flag: false, moduleName: "Expand" },
        { name: "技能大赛", flag: false, moduleName: "SkillEvents" },
        { name: "考核评价", flag: false, moduleName: "CheckEvaluate" },
        { name: "走进行业", flag: false, moduleName: "AboutTmt" },
      ],
    };
  },
  components: {
    Home,
    CourseTeach,
    RealTask,
    Expand,
    SkillEvents,
    CheckEvaluate,
    AboutTmt,
  },
  methods: {
    // nav栏进行切换
    navCut(nav){
      this.navList.forEach(item => {
        item.flag = false
      })

      nav.flag = true 
      this.main = nav.moduleName
    }
  }
};
</script>

<style lang="less" scoped>
.main-wrapper {
  background-color: #f7f7f7;
  .main {
    width: 1730px;
    margin: 0 auto;
    .nav {
      height: 107px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .nav-item {
        width: 217px;
        height: 60px;
        background: linear-gradient(92deg, #2998cd 0%, #1cb9ba 100%);
        border-radius: 20px 20px 0px 0px;
        text-align: center;
        line-height: 60px;
        font-size: 26px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-style: italic;
        color: #ffffff;
        &.active {
          background: #FFFFFF;
          color: #135EF2;
        }
      }
    }
  }
}
</style>
